<template lang="pug">
  h4 Compositions

  composition-gallery
  div.preview(v-if="formData.thumbnail")
    div.svg-wrapper(v-html="formData.thumbnail")

  form(@submit.prevent="handleSubmit")
    input(type="text" v-model="formData.name" placeholder="name")

    select(v-model="formData.structure")
      option(disabled, value="undefined") select structure
      option(v-for="strucItem in structures" :key="strucItem.id" :value="strucItem.value") {{strucItem.name}}

    select(v-model="formData.align")
      option(disabled, value="undefined") select align
      option(v-for="align in aligns[formData.structure]" :key="align.id" :value="align.value") {{align.name}}

    ul.components-form
      li(v-for="(component, direction) in formData.components" :key="component.id" :value="component.value") {{direction}}:
        br 
        select(v-model="component.graphicId")
          option(disabled, value="undefined") select graphic
          option(v-for="graphic in graphics" :key="graphic.id" :value="graphic.id") {{graphic.name}}
        select(v-model="component.based")
          option(disabled, value="undefined") select based
          option(v-for="based in baseds" :key="based.id" :value="based.value") {{based.name}}
        br 
        label size:
          input.size(type="number" v-model="component.size")
        label margin:
          input(type="text" v-model="component.margin")

    button(type="submit" :disabled="submitDisabled || formData.name.trim() === ''") Create Composition
    button(@click="resetFormData") Reset
</template>

<script setup>
import { computed, ref, onMounted, watch, inject } from 'vue';
import { mergeCompositionSvg } from '../../utils/mergeCompositionSvg.util'
import { aligns, baseds, structures, genComponentsJson } from './comp-constant.js'
import './composition.css'
import api from '@/apis/api'
import CompositionGallery from './comp-gallery.vue'

const mainBrandId = inject('mainBrandId')
const graphics = inject('graphics')
const submitDisabled = ref(true)

const formData = ref({
  name: '',
  brandId: undefined,
  safePadding: 0,
  isPrivate: false,
  miniummWdith: [],
  structure: undefined,
  align: undefined,
  components: {},
  thumbnail: '',
})

const initialFormData = { ...formData.value, ...{ components: {} } };
const handleSubmit = async () => {
  const result = await api.post('compositions', { ...formData.value })
  resetFormData()
};

const resetFormData = () => {
  for (let key in initialFormData) {
    formData.value[key] = initialFormData[key];
  }
};

/* 
 * preview composition & generate composition formData
 * When components change, gen composition
 */
watch(() => mainBrandId.value, () => formData.value.brandId = mainBrandId.value)
watch(() => formData.value.align, () => setPreview())
watch(() => formData.value.components, () => setPreview(), { deep: true })

function setPreview() {
  const compositon = genCompositionJson()
  const svgCode = mergeCompositionSvg(compositon)
  submitDisabled.value = !svgCode
  formData.value.thumbnail = svgCode
}

function genCompositionJson() {
  const { structure, align, components } = { ...formData.value }
  let compositon = { structure, align, components: {} }
  for (let key in components) {
    let element = { ...components[key] }
    const graphic = graphics.value.find(item => item.id === element.graphicId)
    if (!graphic) { return }
    element.name = graphic.name
    element.svgCode = graphic.svgCode
    compositon.components[key] = element
  }
  return compositon
}

/* 
  * mounte components form
  */
watch(() => formData.value.structure, structure => {
  formData.value.components = genComponentsJson(structure)
  formData.value.structure = structure
  formData.value.align = undefined
  formData.value.thumbnail = ''
})

// watch(() => items.value.map((item) => item.checked), (val) => {
//   console.log(val)
// })

</script>
